<template>
  <div class="add">
    <div class="header-bgc">
      <div class="text-contant">
        <div class="welcome">欢迎您的加入</div>
        <div class="des">我们会尽早核实信息并及时回复</div>
      </div>
      <img :src="bgc" alt>
    </div>
    <div class="main-bgc"></div>
    <div class="main-contant">
      <div class="type-contant">
        <div class="title">加盟类型</div>
        <div class="check-box">
          <div class="item-box" @click="changeIndex(1)">
            <div class="check" v-show="type != 1"></div>
            <img :src="gou" alt v-show="type == 1">
            <div class="text">个人</div>
          </div>
          <div class="item-box" @click="changeIndex(2)">
            <div class="check" v-show="type != 2"></div>
            <img :src="gou" v-show="type == 2">
            <div class="text">公司</div>
          </div>
        </div>
      </div>
      <div class="input-contant">
        <div class="text">您的姓名</div>
        <input type="text" v-model="realname" class="input" placeholder="请输入您的姓名" @blur="inputBack()">
        <div class="text">您的手机</div>
        <input type="text" v-model="mobile" class="input" placeholder="请输入您的手机" @blur="inputBack()">
        <div class="text">所在区域</div>
        <yd-cell-group>
          <yd-cell-item arrow>
            <input
              slot="right"
              type="text"
              @click.stop="show1 = true"
              v-model="model1"
              readonly
              placeholder="请选择所在区域"
              class="input-1"
              @blur="inputBack()"
            >
          </yd-cell-item>
        </yd-cell-group>
        <yd-cityselect v-model="show1" :callback="result1" :items="district"></yd-cityselect>
        <div class="text" v-show="type == 2">公司名称</div>
        <input
          type="text"
          v-show="type == 2"
          v-model="company"
          class="input"
          placeholder="请输入您的公司名称"
          @blur="inputBack()"
        >
        <div class="space-contant" @click="postData">
          <div class="button">立即加入</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions } from "vuex";
import District from "ydui-district/dist/jd_province_city_area_id";
export default {
  name: "collections",
  data() {
    return {
      bgc: require("../../assets/add/bgc.png"),
      gou: require("../../assets/public/gou.png"),
      show1: false,
      model1: "",
      district: District,
      type: 1,
      mobile: "",
      company: "",
      realname: ""
    };
  },
  created() {
    this.change(false);
  },
  methods: {
    ...mapActions("Home", ["change"]),
    result1(ret) {
      this.model1 = ret.itemName1 + " " + ret.itemName2 + " " + ret.itemName3;
    },
    changeIndex(type) {
      this.type = type;
    },
    postData() {
      if (!this.check()) {
        return;
      }
      this.$dialog.loading.open("正在加载");
      this.$http
        .post("/apply/Create", {
          realname: this.realname,
          mobile: this.mobile,
          address: this.model1,
          type: this.type,
          company: this.company
        })
        .then(res => {
          console.log(res.data.data);
          this.$dialog.loading.close();
          this.$dialog.toast({
            mes: "提交成功",
            timeout: 1500,
            icon: "success"
          });
        });
    },
    // 检查输入
    check() {
      if (this.realname.length <= 0) {
        this.$dialog.toast({
          mes: "请输入名字",
          timeout: 1500,
          icon: "error"
        });
        return false;
      }
      if (this.mobile.length <= 0) {
        this.$dialog.toast({
          mes: "请输入手机",
          timeout: 1500,
          icon: "error"
        });
        return false;
      }
      if (this.model1.length <= 0) {
        this.$dialog.toast({
          mes: "请选择地区",
          timeout: 1500,
          icon: "error"
        });
        return false;
      }

      return true;
    }
  }
};
</script>
